<template>
  <a-tree-select
    allowClear
    labelInValue
    style="width: 100%"
    :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
    :placeholder="placeholder"
    :value="treeValue"
    :treeData="treeData"
    @change="onChange">
  </a-tree-select>
</template>
<script>

import { queryDepartTreeList } from '@/api/api'

export default {
  name: 'OrgTreeSelect',
  props: {
    value:{
      type: String,
      required: false
    },
    placeholder:{
      type: String,
      default: '请选择',
      required: false
    },
    disabled:{
      type:Boolean,
      default:false,
      required:false
    },
    // 是否支持多选
    multiple: {
      type: Boolean,
      default: false,
    },
    loadTriggleChange:{
      type: Boolean,
      default: false,
      required:false
    }
  },
  data () {
    return {
      treeValue: null,
      treeData:[],
      text:"",
      code:""
    }
  },
  watch: {

  },
  created(){
    this.loadData();
  },
  methods: {
    loadData(){
      let that=this
      queryDepartTreeList().then(res=>{
        if(res.content){
          that.treeData =res.content
        }else{
          that.treeData=[]
        }
      })
    },
    onChange(value){
      if(!value){
        this.$emit('change', '');
        this.treeValue = null
      } else if (value instanceof Array) {
        this.$emit('change', value.map(item => item.value).join(','))
        this.treeValue = value
      } else {
        this.$emit('change', value.value,value.label)
        this.treeValue = value
      }
    },
    getCurrTreeData(){
      return this.treeData
    }
  },
  //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>